<template>
  <div class="edu-viewPort" ref="edu-viewPort">
    <!-- 教育局模块视口 -->
    <EduHeadTop></EduHeadTop>
    <router-view></router-view>
    <!-- <transition name="el-fade-in-linear">
      <keep-alive>
        <router-view
          :key="$route.path"
          v-if="$route.meta.keepAlive"
        ></router-view>
      </keep-alive>
    </transition> -->
    <!-- <transition name="fadeIn">
      <router-view
        :key="$route.path"
        
      ></router-view>
    </transition> -->
    <div class="bottomModel" ref="bottomModel">
      <BottomModel></BottomModel>
    </div>
  </div>
</template>

<script>
import EduHeadTop from "@/components/edu-model/head-top.vue";
import BottomModel from "@/components/edu-model/bottom-model.vue";
export default {
  components: { EduHeadTop, BottomModel },
  mounted() {
    const bottomModel = this.$refs.bottomModel;
    this.$refs["edu-viewPort"].style["padding-bottom"] =
      bottomModel.offsetHeight + "px";
  }
};
</script>

<style scoped lang="scss">
.edu-viewPort {
  min-height: 100vh;
  min-width: 1600px;
  // padding-bottom: 329px;
  position: relative;
  background-color: #f8f8f8;
  .bottomModel {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
</style>
